<template>
  <div>
    <el-alert title="注意:只允许为第三级分类设置参数!" type="warning" show-icon>
    </el-alert>
    <el-form>
      <el-form-item label="选择商品分类:">
        <el-cascader
          :options="splist2"
          v-model="cate"
          :props="getdata"
          clearable
          @change="selChange"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button
          type="primary"
          :disabled="disabled"
          @click="dialogFormVisible = true"
          >添加参数</el-button
        >
        <el-table :data="manyList" border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-tag
                size="medium"
                closable
                v-for="(item, index) in scope.row.attr_vals"
                @close="handleClose(scope.row, index)"
                :disable-transitions="false"
                >{{ item }}</el-tag
              >
              <el-input
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(scope.row)"
                >+ New Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="Editfn(scope.row)"
                >编辑</el-button
              >
              &nbsp;
              <el-button type="danger" icon="el-icon-delete" size="mini"
               @click="delFn(scope.row)" >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="静态属性" name="only">
        <el-button
          type="primary"
          :disabled="disabled"
          @click="dialogFormVisible = true"
          >添加属性</el-button
        >
        <el-table :data="onlyList" border>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-tag
                size="medium"
                closable
                :disable-transitions="false"
                v-for="(item, index) in scope.row.attr_vals"
                @close="handleClose(scope.row, index)"
                >{{ item }}</el-tag
              >
              <el-input
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(scope.row)"
                >+ New Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="Editfn(scope.row)"
                >编辑</el-button
              >
              &nbsp;
              <el-button type="danger" icon="el-icon-delete" size="mini"
                @click="delFn(scope.row)" >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- //添加动态参数弹出框  -->
    <el-dialog
      :title="activeName == 'many' ? '添加动态参数' : '添加静态属性'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="Addform" :rules="rules" ref="Addform">
        <el-form-item
          :label="activeName == 'many' ? '动态参数' : '静态属性'"
          prop="attr_name"
        >
          <el-input v-model="Addform.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddformFn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="activeName == 'many' ? '修改动态参数' : '修改静态属性'"
      :visible.sync="dialogEditVisible"
    >
      <el-form :model="Editform" :rules="rules" ref="Editform">
        <el-form-item
          :label="activeName == 'many' ? '动态参数' : '静态属性'"
          prop="attr_name"
        >
          <el-input v-model="Editform.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditformFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCat,
  getCategories,
  Editcategories,
  Addcategories,
  chaCategories,
  DelCategories
} from "@/http/Goods";
export default {
  data() {
    return {
      addParams: {},

      paramsData: [],
      cate: [],
      splist2: [{}],
      getdata: {
        label: "cat_name",
        value: "cat_id",
        checkStrictly: true,
      },
      activeName: "many",
      onlyList: [],
      manyList: [],
      inputValue: "",
      inputVisible: false,
      dialogFormVisible: false,
      Addform: {
        attr_name: "",
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      
      Editform: {
        attr_name: "",
        attr_sel:'',
        attr_vals:'',
        attrId:0,
      },
      
      dialogEditVisible: false,
    };
  },
  methods: {
    async getParams1() {
      let res = await getCat();
      console.log(res);
      this.splist2 = res.data;
    },
    //tab 切换
    handleClick(tab) {
      console.log(tab.name);
      if (this.cate.length == 3) {
        this.Categories(tab.name);
      }
    },
    // 下拉选择分类 -
    selChange() {
      console.log(this.cate);
      if (this.cate.length == 3) {
        this.Categories("many");
      }
    },
    // 请求静态参数动态属性
    async Categories(sel) {
      let res = await getCategories(this.cate[this.cate.length - 1], {
        sel,
      });
      res.data.forEach((item, i) => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
        item.inputValue = "";
        item.inputVisible = false;
      });
      if (sel == "many") {
        this.manyList = res.data;
      } else {
        this.onlyList = res.data;
      }
      console.log(res);
    },
    // 删除属性-------
    async handleClose(row, i) {
      /**
| :id       | 分类 ID                | 不能为空`携带在url中`      |
| --------- | ---------------------- | -------------------------- |
| :attrId   | 属性 ID                | 不能为空`携带在url中`      |
| attr_name | 新属性的名字           | 不能为空，携带在`请求体`中 |
| attr_sel  | 属性的类型[many或only] | 不能为空，携带在`请求体`中 |
| attr_vals | 参数的属性值           | 可选参数，携带在`请求体`中 |*/

      row.attr_vals.splice(i, 1);

      var attr_vals = row.attr_vals.join(",");
      let res = await Editcategories(
        this.cate[this.cate.length - 1],
        row.attr_id,
        {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: attr_vals,
        }
      );
      console.log(row.attr_vals);
      console.log(row, i);
    },
    // 点击 + new Tag 显示input
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // Input添加属性
    async handleInputConfirm(row) {
      if (row.inputValue) {
        row.attr_vals.push(row.inputValue);
      }
      var attr_vals = row.attr_vals.join(",");
      let res = Editcategories(this.cate[this.cate.length - 1], row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: attr_vals,
      });
      row.inputVisible = false;
      row.inputValue = "";
    },
    // 添加按钮 添加属性
    async AddformFn() {
      let res = await Addcategories(this.cate[this.cate.length - 1], {
        attr_name: this.Addform.attr_name,
        attr_sel: this.activeName,
      });
      this.Categories(this.activeName);
      this.dialogFormVisible = false;
    },
    async Editfn(row) {
        let res = await chaCategories(
        this.cate[this.cate.length - 1],
        row.attr_id,
        {
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals,
        }
      );
      
      this.Editform.attrId=res.data.attr_id
      this.Editform.attr_sel=res.data.attr_sel
      this.Editform.attr_vals=res.data.attr_vals
      console.log(res);
      this.dialogEditVisible = true;
    },
    async EditformFn() {
      let res = await Editcategories(this.cate[this.cate.length - 1],this.Editform.attrId,{
        attr_name:this.Editform.attr_name,
        attr_sel:this.Editform.attr_sel,
        attr_vals:this.Editform.attr_vals
      }
    
      );
      console.log(this.Editform);
      this.Editform.attr_name=''
       this.Categories(this.activeName);
      this.dialogEditVisible = false;
    },
    async  delFn(row){
      console.log(row);
      let res = await DelCategories(this.cate[this.cate.length-1],row.attr_id)
      this.getParams1()
       this.Categories(this.activeName);
    }
  },
  created() {
    this.getParams1();
  },
  computed: {
    disabled() {
      return this.cate.length == 3 ? false : true;
    },
  },
};
</script>
<style>
.el-form {
  margin: 10px 0;
}
.el-cascader-panel {
  height: 300px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>